<template>
	<!-- 首页标题栏，轮播图整合插件 -->
	<view class="banner-swiper-wrap" :style="[navbarInnerStyle]">
		<!-- 标题栏 -->
		<view class="u-navbar u-navbar-fixed" :style="{background: 'url('+navBgImage+')',height:styleheight}">
			<view class="u-navbar-inner">
				<view class="search-box" v-if="citys" @click="$Router.push('/pages/public/cityList')">
					<view class="citys">{{citys}}</view>
					<!--					<u-search placeholder="输入商品/店铺名称" :disabled="true" shape="square" action-text="" :action-style="{'display':'none'}"-->
					<!--					 :animation="true" class="u-flex u-row-center" @click="$Router.push('/pages/public/search')"></u-search>-->
					<u-icon name="arrow-down" color="#ffffff" class=""></u-icon>
				</view>
				<!--        <view class="search-box" style="width: 48%;" v-show="isScorll" :class="isScorll?'activeopty':'activenone'">-->
				<!--          <u-search placeholder="输入店铺名称" :disabled="true" shape="square" action-text="" :action-style="{'display':'none'}"-->
				<!--           :animation="true" class="u-flex u-row-center" @click="$Router.push('/pages/public/search')"></u-search>-->
				<!--          <u-icon name="scan" class="scan" color="#333333" @click="toscan"></u-icon>-->
				<!--        </view>-->
			</view>
		</view>
		<!-- 轮播组件 -->
		<!--		<swiper class="screen-swiper square-dot" @change="onChange" style="height: 520rpx" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">-->
		<!--			<swiper-item v-for="(item, index) in list" :key="index" @tap="onSwiper(index)"><image :src="item.image" mode="aspectFill"></image></swiper-item>-->
		<!--		</swiper>-->
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let systemInfo = uni.getSystemInfoSync();
	let menuButtonInfo = {};
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	/**
	 * home-head-轮播卡片,主要为了处理数据
	 * @property {Array} list 轮播图数据，
	 * @property {String} mode 指示器模式
	 * @property {String} navTitle 项目名称
	 */
	export default {
		components: {},
		data() {
			return {
				navBgImage: 'https://d-duomi.bigchun.com/images/Frame108.png',
				changeNavBackground: false,
				swiperCur: 0,
				statusBarHeight: systemInfo.statusBarHeight,
				styleheight: '',
				// citys:uni.getStorageSync("city")||''
			};
		},
		props: {
			isScorll: {
				type: Boolean,
				default: false
			},
			// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			citys: {
				type: String,
				default: ''
			},
			navTitle: {
				type: String,
				default: 'Shopro商城'
			},
			navTitleStyle: {
				type: Object,
				default: () => {
					return {
						color: '#fff',
						fontSize: '38rpx'
					};
				}
			}
		},
		computed: {
			// 导航栏内部盒子的样式
			navbarInnerStyle() {
				let style = {};
				if (this.statusBarHeight == '20') {
					this.statusBarHeight = 10
				}
				style.height = (this.navbarHeight + this.statusBarHeight) + 'px';
				// #ifdef MP
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.marginRight = rightButtonWidth + 'px';
				// #endif
				this.styleheight = style.height;
				return style;
			},
			// 整个导航栏的样式
			navbarStyle() {
				let style = {};
				style.zIndex = '11000';
				style.background = `url(${this.navBgImage}) no-repeat top / 100% auto`;
				Object.assign(style, this.background);
				return style;
			},
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 44;
				// #endif
				// #ifdef MP
				return systemInfo.platform == 'ios' ? 44 : 48;
				// #endif
			}
		},
		created() {},
		methods: {
			onSwiper(e) {
				this.$Router.push(this.list[e].path);
			},
			onChange(e) {
				this.swiperCur = e.detail.current;
			},
			//绑定设备调用微信扫码
			toscan() {
				// 允许从相机和相册扫码
				var that = this;
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						let formdata = {
							pc_id: res.result,
							authorization: uni.getStorageSync('token')
						}
						// uni.$u.http.post('/applet/bind_device', formdata).then(res => {
						//   if(res.code){
						//     that.$u.toast('绑定成功');
						//     that.getFacilitiesInfo()
						//   }else{
						//     that.$u.toast(res.msg)
						//   }
						// })
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	// 轮播
	.banner-swiper-wrap {
		height: 180rpx;
		position: relative;
		z-index: 100;

		.search-box {
			height: 80rpx;
			display: flex;
			align-items: center;
			position: relative;
			margin: 0 14rpx;
			color: #ffffff;

			.citys {
				margin-right: 10rpx;
			}

			.scan {
				position: absolute;
				right: 20rpx;
				top: 28rpx;
				z-index: 1222;
			}
		}
	}

	.u-navbar {
		width: 100%;
		background: url(https://d-duomi.bigchun.com/images/Frame108.png) no-repeat;
		background-size: 100% auto;
		//height: 180rpx;
		display: flex;
		align-items: center;
	}

	.u-navbar-fixed {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 19991;
	}

	.u-status-bar {
		width: 100%;
	}

	.u-navbar-inner {
		@include vue-flex;
		position: relative;
		width: 100%;
		align-items: flex-end;
		height: 100% !important;
	}

	.u-back-wrap {
		@include vue-flex;
		align-items: center;
		flex: 1;
		flex-grow: 0;
		padding: 14rpx 14rpx 14rpx 24rpx;
	}

	/deep/.u-input,
	/deep/.u-content {
		background: #ffffff !important;
	}

	.activeopty {
		opacity: 1;
		transition: opacity 0.8s;
	}

	.activenone {
		opacity: 0;
		transition: opacity 0.8s;
	}
</style>